<template>
	<view :class="Visible ? 'usable-coupon open' : 'usable-coupon close'">
		<view class="popup-bg" @click="closePopup"></view>
		<view class="main" v-on:click.stop>
			<view class="pop-title">
				<view>上传身份证</view>
				<text class="pop-close icon iconfont icon-guanbi" @click.stop="closePopup"></text>
			</view>
			<view class="p-0-20">
				<view class="upImg">
					<img :src="imgSrc" alt="" />
				</view>
				<button class="up-btn" @click.stop="uploadImg">上传头像面</button>
			</view>
			<view class="group bg-white">
				<view class="group-hd">
					<view class="left">
						<text class="min-name">姓名</text>
					</view>
				</view>
				<view class="d-s-c inp">
					<input type="text" v-model="IDData.name"/>
				</view>
			</view>
			<view class="group bg-white">
				<view class="group-hd">
					<view class="left">
						<text class="min-name">身份证号码</text>
					</view>
				</view>
				<view class="d-s-c inp">
					<input type="text" v-model="IDData.idNumber"/>
				</view>
			</view>
			<button class="up-btn" @click.stop="next">下一步</button>
			<!-- <view class="p-0-20">
				<view class="" v-if="discount.product_reduce.length > 0">
					<view class="f22 gray3 line-h-50 p-20-0">
						<text class="text-box ">满减</text>
						<text v-for="(item,index) in discount.product_reduce" :key="index" :label="item" :value="index">
							<text class="ml20" v-if="item.full_type == 1">满{{item.full_value}}元</text>
							<text class="ml20" v-if="item.full_type == 2">满{{item.full_value}}件</text>
							<text v-if="item.reduce_type == 1">减{{item.reduce_value}}元</text>
							<text v-if="item.reduce_type == 2">{{(100 - item.reduce_value)/10}}折</text>
						</text>
					</view>
				</view>
				<view class="p-20-0 line-h-50 f22 gray3 " v-if="discount.give_points>0">
					<text class="text-box">返积分</text>商城购物返积分，订单完成后最高返{{discount.give_points}}积分
				</view>
			</view> -->
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgSrc:'../../../../static/icon/ID.png',
				IDData:{
					name:'',
					idNumber:''
				},
				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*是否可见*/
				Visible: false,
				/*优惠券列表*/
				datalist: {},
				/*尺寸比例*/
				ratio: 1
			};
		},
		props: ['isCoupon', 'couponList', 'discount'],

		onLoad() {},
		mounted() {
			this.init();
		},
		watch: {
			isCoupon: function(n, o) {
				if (n != o) {
					this.Visible = n;
					// this.datalist = this.couponList;
					// this.getHeight();
				}
			}
		},
		methods: {
			uploadImg(){
				let self = this;
				my.chooseImage ({
				  // 可以根据您的业务按需选择使用 ['album'] 或 ['camera'] 或 ['album', 'camera']
				  sourceType: ['album', 'camera'],
				  success: function (res) {
				    console.log (res);
					self.uploadFile(res.tempFilePaths);
				  },
				  fail: function (err) {
				    console.log (err);
				  },
				});
			},
			/*上传图片*/
			uploadFile: function(tempList) {
				let self = this;
				let i = 0;
				let img_length=tempList.length;
				let params = {
					token: uni.getStorageSync('token'),
			        appId: self.getAppId()
				};
				// uni.showLoading({
				//     title: '图片上传中'
				// });
				tempList.forEach(function(filePath, fileKey) {
					uni.uploadFile({
						url: self.websiteUrl + '/api/front/file/upload/image',
						filePath: filePath,
						name: 'iFile',
						formData: params,
						header: {
						  'appId': self.getAppId()
						},
						success: function(res) {
							let result = typeof res.data === 'object' ? res.data : JSON.parse(res.data);
							if (result.code === 1) {
							console.log(result,'result',result.data.filePath)
								self.IDOcr(result.data.filePath)
							}else{
								self.showError(result.msg);
							}
						},
						// complete: function() {
						// 	i++;
						// 	if (img_length === i) {
						// 		uni.hideLoading();
						// 		// 所有文件上传完成
						// 		self.$emit('getImgs',self.imageList);
						// 	}
						// }
					});
				});
				
			},
			IDOcr(url){
				console.log(url,'url')
				let self = this
				let result = null
				self._get('user/auth/idOCR',{'idImageUrl':url},function(res){
					// console.log(res,'upload res')
					if(res.code === 1){
						if(!res.data){
							uni.showToast({
								title: '身份证识别失败，请重新上传',
								icon: 'none',
								duration: 3000
							});
						}else{
							result = res.data
							self.IDData = result
							self.imgSrc = url
							// uni.showModal({
							// 	title:'请确定信息是否正确',
							// 	content:`姓名：${res.data.name}身份证号：${res.data.idNumber}`,
							// 	success(res) {
							// 		if(res.confirm){
										
							// 			// self.uploadIDInfo(result,url)
							// 		}else if(res.cancel){
							// 			console.log('cancel')
							// 		}
							// 	}
							// })
							// self.uploadIDInfo(res.data)
						}
					}
				})
			},
			next(){
				this.uploadIDInfo(this.IDData,this.imgSrc)
			},
			// 上传身份证信息
			uploadIDInfo(data,url){
				// /front/user/auth/authID
				let self = this
				self._postBody('user/auth/authID',{...data,idFaceUrl:url},function(res){
					console.log('uploadIDInfo',res)
					if(res.code === 1){
						self.getFaceAuthUrl()
					}
				})
			},
			// front/user/auth/getFaceAuthUrl
			// 获取人脸识别地址
			getFaceAuthUrl(){
				let self = this
				this._get('user/auth/getFaceAuthUrl',{},function(res){
					console.log(res,'res')
					if(res.code === 1){
						self.toOtherApp(res.data.h5Url)
						// uni.navigateTo({
						// 	url: '/pages/webview/webview?url=' + res.data.h5Url
						// });
					}
				})
			},
			toOtherApp(url) {
				let self = this
				console.log(url,self.getAppId(),'url000')
				this.closePopup()
				my.ap.navigateToAlipayPage({
					  path: url
				})
			},
			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						self.ratio = res.windowWidth / 750;
						self.getHeight();
					}
				});
			},
			/*获取高度*/
			getHeight() {
				// let count = Object.keys(this.couponList).length;
				// if (count > 2) {
				// 	this.scrollviewHigh = this.phoneHeight * 0.5;
				// } else {
				// 	if (count == 1) {
				// 		this.scrollviewHigh = 250 * this.ratio + 60;
				// 	} else if (count == 2) {
				// 		this.scrollviewHigh = 460 * this.ratio + 60;
				// 	}
				// }
			},
			/*选择优惠券*/
			selectCoupon(e, i) {
				let self = this;
				uni.showLoading({
					title: '领取中'
				});
				self._post('user.coupon/receive', {
					coupon_id: e.coupon_id,
				}, function(res) {
					uni.hideLoading();
					uni.showToast({
						title: '领取成功',
						duration: 2000,
						icon: 'success'
					});
					self.datalist[i].is_receive = true;
				});
				// self.getData();
			},
			/*关闭弹窗*/
			closePopup() {
				this.$emit('close');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.upImg{
		text-align: center;
		.a-image{
			max-width: 90%;
			margin: 0 auto;
		}
	}
	.group{
		display: flex;
		.inp{
			flex: 1;
			input{
				width: 100%;
				border-bottom: 1px solid #eee;
			}
		}
	}
	.up-btn{
		width: 50%;
		background-color: rgb(23,171,227);
		color: #fff;
		display: block;
		margin-top: 40rpx;
		margin: 40rpx auto 0;
	}
	.usable-coupon .popup-bg {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99;
		height: 100vh;
		width: 100vw;
	}

	.usable-coupon .main {
		position: fixed;
		width: 100%;
		bottom: 0;
		min-height: 200rpx;
		max-height: 1200rpx;
		background-color: #fff;
		transform: translate3d(0, 980rpx, 0);
		transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
		padding-bottom: env(safe-area-inset-bottom);
		border-radius: 15rpx 15rpx 0 0;
		z-index: 99;
	}

	.usable-coupon .main {
		position: fixed;
		width: 100%;
		bottom: 0;
		min-height: 200rpx;
		// max-height: 900rpx;
		background-color: #fff;
		transform: translate3d(0, 980rpx, 0);
		transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
		height: 100vh;
		z-index: 99;
	}

	.usable-coupon.open .main {
		transform: translate3d(0, 0, 0);
	}
	.usable-coupon.close .main{
		display: none;
	}
	.usable-coupon.close .popup-bg {
		display: none;
	}

	.coupon-item-red .operation {
		/* background: #fdf1df; */
	}

	.coupon-btns .btn-cancel {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		background: #999999;
		color: #ffffff;
		border-radius: 0;
	}

	.coupon-item .w100 {
		padding: 0 75rpx;
	}

	.b-radio {
		border: 1rpx solid #FFFFFF;
		border-radius: 30rpx;
		padding: 10rpx 30rpx;
	}

	.range_item {
		border: 1rpx solid #D9D9D9;
		border-top: none;
		padding: 8rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		color: #666666;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
	}

	.text-sheng {
		display: inline-block;
		width: 26rpx;
		height: 28rpx;
		background: linear-gradient(180deg, #FF5649 0%, #FF5649 100%);
		border-radius: 3rpx;
		font-size: 18rpx;
		font-family: PingFangSC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 28rpx;
	}

	.text-box {
		padding: 2rpx 6rpx;
		background-color: #fbe9e7;
		color: #fd5342;
		margin-right: 10rpx;
		border-radius: 4rpx;
		font-size: 20rpx;
	}

	.line-h-50 {
		line-height: 50rpx;
	}

	.pop-title {
		padding-top: 53rpx;
		font-size: 28rpx;
		font-family: PingFangSC;
		font-weight: 500;
		color: #333333;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 50rpx;
	}

	.pop-close {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		font-size: 22rpx;
		color: #999999;
	}

	.scroll-coupon {
		margin: 0 20rpx;
		border-top: 1rpx solid #EEEEEE;
		width: 710rpx;
		box-sizing: border-box;
	}

	.scroll-coupon-tit {
		height: 74rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 24rpx;
		color: #999999;
	}
</style>
